<template>
  <div class="log-state d-flex">
    <div class="inventory-log">
      <div class="screen-item-title bgInImage d-flex align-items-center inventory-title justify-content-between">
        {{ record }}
        <div class="btnGroup d-flex">
          <div class="in-storage" @click="inHouse">
            <span class="in-storage-text">入库</span>
          </div>
          <div class="out-storage" @click="outHouse">
            <span class="out-storage-text">出库</span>
          </div>
        </div>
      </div>
      <div class="out-storage-record">
        <div class="out-storage-record-head d-flex">
          <div :class="item.className" v-for="item in list">{{ item.name }}</div>
        </div>
        <div class="storage-content">
          <div v-for="item in tableList" class="d-flex">
            <div class="serial-num">{{ item.mushroomCode }}</div>
            <div class="out-time">{{ item.toWarehouseTime || item.outWarehouseTime }}</div>
            <div class="out-quantity">{{ item.toWarehouseAmount || item.outWarehouseAmount }}</div>
            <div class="total-quantity">{{ item.days || item.outWarehouseWeight }}</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="screen-item-title videoTitle">视频监控</div>
      <div class="videoWrap">
        <video
          id="myVideo"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          preload="auto"
          autoplay
          muted="true"
          data-setup="{}"
          style="width: 100%; margin: 0 auto; height: auto"
        >
          <source id="source" src="http://hls01open.ys7.com/openlive/010d1021b8924969a462f11fb1f49e88.m3u8" type="application/x-mpegURL" />
        </video>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import putStorage from '@/api/put-storage';
import outWarehouse from '@/api/outWarehouse';
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import eventEmitter from '@/util/listener';
import { data } from 'dom7';
const isOut = ref(false);
const list = ref([
  { name: '编号', className: 'serial-num', name1: '编号', name2: '编号' },
  {
    name: '入库时间',
    className: 'out-time',
    name1: '入库时间',
    name2: '出库时间',
  },
  {
    name: '入库瓶数',
    className: 'out-quantity',
    name1: '入库瓶数',
    name2: '出库瓶数',
  },
  {
    name: '入库天数',
    className: 'total-quantity',
    name1: '入库天数',
    name2: '出库重量(公斤)',
  },
]);
let data1: any = ref({});
let tableList = ref<any>([]);
getTableData();
async function getTableData() {
  let data = await putStorage.toWarehouseList({ current: 1, size: 9999, ...data1.value });
  tableList.value = data.data.data.records;
}
async function getTableDataOut() {
  let data = await outWarehouse.outWarehouseList({ current: 1, size: 9999, ...data1.value });
  tableList.value = data.data.data.records;
}
eventEmitter.on('event', async (ev) => {
  data1.value.mushroomCode = ev.detail;
  if (!isOut.value) {
    getTableData();
  } else {
    getTableDataOut();
  }
});
const inHouse = () => {
  isOut.value = false;
  list.value.forEach((item) => {
    item.name = item.name1;
  });
  getTableData();
};
const isShow = ref(false);
const outHouse = () => {
  isOut.value = true;
  list.value.forEach((item) => {
    item.name = item.name2;
  });
  getTableDataOut();
};
let record = computed(() => {
  return isOut.value ? '出库记录' : '入库记录';
});
let player: any;
onMounted(() => {
  player = videojs(
    'myVideo',
    {
      muted: true,
      autoplay: true,
    },
    () => {
      player.play();
    }
  );
});
onBeforeUnmount(() => {
  if (player != null) {
    player.dispose(); // dispose()会直接删除Dom元素
  }
});
</script>
<style>
.log-state {
  height: 292px;
}
.bgInImage {
  background: url('./../assets/组 1140 拷贝.png') no-repeat;
  background-size: 100% 100%;
}
.inventory-log {
  position: relative;
  width: 497px;
  padding-right: 14px;
  padding-top: 20px;
}
.inventory-title {
  margin-bottom: 20px;
}
.in-storage {
  width: 66px;
  height: 26px;
  background: #2062cf;
  border-radius: 5px;
}
.out-storage {
  width: 67px;
  height: 27px;
  border: 1px solid #2062cf;
  border-radius: 5px;
  cursor: pointer;
  line-height: 27px;
  text-align: center;
}
.in-storage {
  width: 67px;
  height: 27px;
  background: #2062cf;
  border-radius: 5px;
  cursor: pointer;
  line-height: 23px;
  text-align: center;
  margin-right: 14px;
}

.thead-color > * {
  color: #0000ff;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
}
.log-table-width {
  width: 486px;
}
.in-storage-text {
  text-align: center;
  color: #e6e6e6;
  font-size: 12px;
  display: inline-table;
  line-height: 24px;
  vertical-align: middle;
}
.out-storage-text {
  text-align: center;
  color: #2062cf;
  font-size: 14px;
  display: block;
  line-height: 24px;
}
.out-storage-record {
  width: 497px;
}
.out-storage-record-head {
  height: 30px;
  background: rgba(21, 103, 237, 0.3);
}
.serial-num,
.out-time,
.out-quantity,
.total-quantity {
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: rgba(21, 103, 237, 1);
  border-right: solid 1px #1567ed;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.total-quantity {
  border: none;
  width: 133px;
}
.serial-num {
  width: 63px;
}
.out-time {
  width: 173px;
}
.out-quantity {
  width: 127px;
}
.storage-content {
  background-color: rgba(21, 103, 237, 0.1);
  color: #ffffff;
  height: 180px;
  overflow-y: auto;
}
.storage-content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 30px;
}
.storage-content * {
  color: #ffffff !important;
}
.video-js .vjs-tech {
  position: relative !important;
}
.videoWrap {
  padding: 10px 40px;
  height: 249px;
}
.videoTitle {
  margin-top: 21px;
  background: url(./../assets/1141.png) no-repeat;
  background-size: 100% 100%;
}
</style>
